<template>
  <div class="Search">
    <div class="title">
      <img src="../assets/img/About/back.png" @click="prev" class="prev"/>
      搜索页</div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      offset="50"
    >
    <li class="info" v-for="(item,index) in Data" :key="index" @click="navTo(item.hash,item.album_id)">
        <img src="./../assets/img/add.png" alt="" class="add" @click.stop="add(item.hash,item.album_id)">
        <div class="r">
          <p class="songname">{{item.songname}}</p>
          <p class="detail"><span class="author">{{item.author}}</span><span>|</span><span>{{item.duration |s_to_hs}}</span></p>
        </div>
    </li>

    </van-list>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { List } from 'vant';
  import {get,post} from "../../utils/request.js"
  Vue.use(List);
  export default{
    'name':"Search",
    data(){
      return{
        loading: false,
        finished: false,
        Data:[],
        index:1
      }
    },
    methods:{
      add(hash,album_id){
        var store=this.$store.state;
        for(var i=0;i<store.list.length;i++){
          if(store.list[i].hash==hash){
            var shuzu=store.list[i];
            store.list.splice(i,1)//添加下一首歌的信息
            store.list.push(shuzu);
          this.$toast('已成功添加到播放队列')
            return;
          }
        }
        post(`https://wwwapi.kugou.com/yy/index.php?r=play/getdata&hash=${hash}&album_id=${album_id}&dfid=1ZxK2M2ZbSkB0wBOnV173l7y&mid=ac9eb74c90f1f717b99aaab44a337f67&platid=4&_=1600657413199`,{}).then(res=>{
          var arr={};
          var data=res.data.data;
            arr.hash=data.hash;
            arr.title=data.audio_name.split(' - ')[1];
            arr.author=data.audio_name.split(' - ')[0];
            if(data.play_url!='')
            arr.src=data.play_url;
            arr.img=data.img;
            arr.album_id=data.album_id;
            arr.lyric=[];
            data.lyrics.split(/\n/).forEach((item)=>{
             if(item.split(']')[1]!='\r'&&item.split(']')[1]!=undefined){
                var obj={time:item.split(']')[0]+']',name:item.split(']')[1]}
               arr.lyric.push(obj)
             }
            })
            store.list.push(arr);
            // console.log(store.list)
            this.$toast('已成功添加到播放队列')
        })
        if(store.list.length==0){
          document.querySelector('audio').load();
        }
      },
      prev(){
        this.$router.back()
      },
      navTo(hash,album_id){
        // console.log(arguments)
        this.$router.push({
          name:'About',
          query:{
            hash:hash,
            album_id:album_id
          }
        })
      },
      onLoad(){
        // setTimeout(() => {
        //     if(this.Data.length<40){
        //       // this.Data.push({songname:'歌名',author:'歌手',duration:'400'})
        //       console.log(1)
        //     }
        //     // 加载状态结束
        //     this.loading= false;
        //     // 数据全部加载完成
        //     if (this.Data == 40) {
        //       this.finished = true;
        //     }
        // }, 1000);
        var keyword=this.$route.query.keyword
        this.index++;
        var arr=[]
        var that=this
        post("http://mobilecdn.kugou.com/api/v3/search/song?format=json&keyword="+keyword+"&page="+that.index+"&pagesize=10",{}).then(res=>{
          if(res.data.data.info.length==0){
            this.finished = true;
          }
          var demo={};
          res.data.data.info.forEach((item)=>{
            demo={songname:item.songname,author:item.singername,duration:item.duration,hash:item.hash,album_id:item.album_id}
            arr.push(demo);
          })
          setTimeout(()=>{
            this.Data=[...this.Data,...arr];
            this.loading= false;
          },1000)
        })
        // console.log(1)
      },
      jiazai(){
        var keyword=this.$route.query.keyword
        var arr=[]
        var that=this
        post("http://mobilecdn.kugou.com/api/v3/search/song?format=json&keyword=+"+keyword+"+&page="+that.index+"&pagesize=10",{}).then(res=>{
          var demo={};
          res.data.data.info.forEach((item)=>{
            demo={songname:item.songname,author:item.singername,duration:item.duration,hash:item.hash,album_id:item.album_id}
            arr.push(demo);
          })
          this.Data=[...this.Data,...arr];
        })
      }

    },
    created(){

        this.jiazai();
    },

    activated(){
      // console.log(this.$route.meta.keepAlive)
      if(!this.$route.meta.isUseCache){
        this.Data=[];
        this.index=1;
        this.loading= false,
        this.finished= false,
        this.jiazai();
        this.onLoad();
      }
    },
      beforeRouteLeave(to, from, next){
        // 列表页面跳转到 详情页时，设置需要缓存
        if(to.name=='About'){
          from.meta.isUseCache=true;
        }
        if(to.name=='Home'){
          from.meta.isUseCache=false;
        }
        next()
    },
    mounted(){

    },


  }
</script>

<style lang="scss" scoped="scoped">
  *{
    margin: 0;
    padding: 0;
  }
  .Search{
    .title{
      background-color: #2b9939;
      height: 80px;
      line-height: 80px;
      font-size: 33px;
      color: #fff;
      text-align: center;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }
    .prev{
    	width: 30px;
    	height: 30px;
      margin-bottom: 30px;
      position: absolute;
      left: 20px;
      top: 25px;
    }
  }
  .van-list{
    padding-top: 80px;
  }
  .info{
    list-style: none;
    padding-left: 20px;
    margin-bottom: 35px;
    p.songname{
      font-size: 29px;
      line-height: 50px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
    p.detail{
      color: #bbb;
      span{
        max-width: 82%;
        display: inline-block;
        padding-right: 12px;
        font-size: 20px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      span:nth-child(2){
        color: #aaa;
      }
    }

  }
  .info:nth-child(1){
    padding-top: 15px;
  }
  .add{
    width: 40px;
    height: 40px;
    margin-top: 20px;
    float: left;
  }
  .r{
    // float: left;
    margin-left: 50px;
  }
</style>
